<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" style="text-align:center;" id="dataTable">
        <tr>
            <th colspan="5">Employee Info</th>
        </tr>
        <tr>
            <th>id</th>
            <th>last name</th>
            <th>email</th>
            <th>gender</th>
            <th>options(<a th:href="@{/toAdd}">add</a>)</th>
        </tr>
        <tr th:each="employee : ${employees}">
            <td th:text="${employee.id}"></td>
            <td th:text="${employee.lastName}"></td>
            <td th:text="${employee.email}"></td>
            <td th:text="${employee.gender}"></td>
            <td>
                <a th:href="@{'/employee/' + ${employee.id}}" @click="deleteEmployee" class="deleteA">delete</a>
                <a th:href="@{'/employee/' + ${employee.id}}">update</a>
            </td>
        </tr>
    </table>

    <!-- 作用：通过超链接控制表单的提交，将 post 请求转换为 delete 请求 -->
    <form id="delete_form" method="post">
        <!-- HiddenHttpMethodFilter 要求：必须传输 _method 请求参数，并且值为最终的请求方式 -->
        <input type="hidden" name="_method" value="delete"/>
    </form>

    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script type="text/javascript">
        var vue = new Vue({
            el:"#dataTable",
            methods:{
                // event 表示当前事件
                deleteEmployee:function (event) {
                    // 通过 id 获取表单标签
                    let delete_form = document.getElementById("delete_form");
                    // 将触发事件的超链接的 href 属性赋值给表单的 action 属性
                    delete_form.action = event.target.href;
                    // 提交表单
                    delete_form.submit();
                    // 阻止超链接的默认跳转行为
                    event.preventDefault();
                }
            }
        });
    </script>

</body>
</html>